<template>
<el-dialog title="编辑基本信息" :visible.sync="visible" append-to-body width="500px">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="门店" prop="store_id">
            <picker-view v-model="ruleForm.store_id" placeholder="请选择门店" type="store"></picker-view>
        </el-form-item>

        <el-form-item label="预产期">
            <el-date-picker v-model="ruleForm.event_month" type="date" placeholder="请选择预产期" format="yyyy 年 MM 月" value-format="yyyy-MM">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="预算">
            <el-input v-model="ruleForm.budget" placeholder="请填写预算"></el-input>
        </el-form-item>
        <el-form-item label="进店时间">
            <el-date-picker class="w100" type="datetime" v-model="ruleForm.entry_time" placeholder="请选择进店时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="备注">
            <el-input type="textarea" v-model="ruleForm.remark" placeholder="备注信息" maxlength="500" show-word-limit></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
import {
    saveCustomerProductApi
} from '@/api/customer/product';

import {
    getAllApi
} from '@/api/system/dictionary/store'

import {
    getOpenedCityListApi,
    getChildrenApi
} from '@/api/system/dictionary/region'
import pickerView from '@/components/picker/select.vue'
import monthPicker from "@/components/monthPicker/monthPicker.vue";
const ruleForm = {
    id: "",
    store_id: "",
    event_date: "",
    budget: "",
    remark: "",
    entry_time:"",
    event_month:""
};

export default {
    inject: ["customerDetail"],
    components: {
        pickerView,
        monthPicker
    },
    data() {
        return {
            visible: false,
            categoryList: [],
            storeList: [], // 门店列表
            cityList: [], // 开放的城市列表
            zoneList: [], // 所选城市的区域列表
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                category_id: [{
                    required: true,
                    message: "请选择信息类型",
                    trigger: "change",
                }, ],
                city_id: [{
                    required: true,
                    message: "请选择所在城市",
                    trigger: "change",
                }]
            },
        };
    },
    created() {
        // 获取已经开放的城市
        // this.getOpenedCityList();
        // this.getStoreList();
    },
    methods: {
        showDialog(product) {
            this.ruleForm = Object.assign(product);
            console.log(this.ruleForm)
            this.visible = true;
        },
        closeDialog() {
            this.visible = false;
        },
        handleMonthChange(event){
            this.ruleForm.event_month = event
        },
        // changeCategory(e) {
        //     if (this.ruleForm.category_id <= 0) {
        //         return false;
        //     }

        //     this.ruleForm.category = e;
        // },
        // 获取已经开放的城市
        // getOpenedCityList() {
        //     getOpenedCityListApi().then(res => {
        //         this.cityList = res.data.list;
        //     })
        // },
        // 切换城市
        changeCity() {
            if (this.ruleForm.city_id <= 0) {
                return false;
            }

            let city = this.cityList.find(ele => ele.id == this.ruleForm.city_id)
            this.ruleForm.city = city;

            let cityId = this.ruleForm.city_id;
            getChildrenApi({
                id: cityId,
                is_open: 1
            }).then(res => {
                this.zoneList = res.data.list;
                // 重置已选择的区域
                this.ruleForm.zone = [];
            })
        },
        selectZone(e) {
            if (this.ruleForm.zone.length >= 5) {
                this.$message.error("最多选择5个意向区域");
                return false;
            }

            let rs = this.ruleForm.zone.find(({
                id
            }) => id == e);
            if (rs != undefined) {
                this.$message.error("当前区域已经存在，请勿重复添加");
                return false;
            }

            this.zoneList.forEach((row, index) => {
                if (row.id == e) {
                    this.ruleForm.zone.push({
                        id: row.id,
                        shortname: row.shortname
                    });
                    this.zoneList.splice(index, 1);
                }
            })
        },
        removeSelectedZone(e) {
            this.ruleForm.zone.splice(e, 1);
        },

        // 获取酒店列表
        getStoreList() {
            getAllApi().then(res => {
                this.storeList = res.data.list;
            })
        },
        // 选择咨询的意向酒店
        selectStore(e) {
            if (this.ruleForm.store.length >= 5) {
                this.$message.error("最多选择5个意向酒店");
                return false;
            }

            let rs = this.ruleForm.store.find(({
                id
            }) => id == e);
            if (rs != undefined) {
                this.$message.error("当前酒店已经存在，请勿重复添加");
                return false;
            }

            this.storeList.forEach((row, index) => {
                if (row.id == e) {
                    this.ruleForm.store.push({
                        id: row.id,
                        title: row.title
                    });
                    // this.storeList.splice(index, 1);
                }
            })
        },
        // 移除所选意向酒店
        removeSelectedStore(e) {
            this.ruleForm.store.splice(e, 1);
        },
        submit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) {
                    return false;
                }
                saveCustomerProductApi(this.ruleForm).then(res => {
                    if (res.code == 200) {
                        this.customerDetail.getAllocateDetail();
                        this.closeDialog();
                        this.$message.success(res.msg);
                    } else {
                        this.$message.warning(res.msg);
                    }
                })

            });
        },
    }
}
</script>

<style lang="scss" scoped>
.line {
    text-align: center;
}
</style>
